<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">		
			<h:outputText value="#{msg['employeesearch.lable.heading']}" styleClass="outputTextTitle" />		
		<h:form id="employeeSearchForm">
			<h:panelGrid columns="5"  style="margin: 0 auto; width: 100%;" >
				<h:panelGroup>
					<h:outputText value="#{msg['module.lable']} *" />
					<br />
					<p:selectOneMenu id="modulesMenu" value="#{employeeSearchBean.selectedModule}" styleClass="selectOneMenu168pxFixedWidth" disabled="#{not (employeeSearchBean.HAS_VIEW_EMP_INFO_PERMISSION or employeeSearchBean.HAS_EDIT_EMP_INFO_PERMISSION)}">
						<f:selectItems value="#{employeeSearchBean.modulesMap}"/>
					</p:selectOneMenu>
					<p:watermark for="modulesMenu" value="Select Module" />  
				</h:panelGroup>
				
				<h:panelGroup>
					<h:outputText value="#{msg['location.label']} *" />
					<br />
					<p:inputText id="location" value="#{employeeSearchBean.location}" disabled="#{not (employeeSearchBean.HAS_VIEW_EMP_INFO_PERMISSION or employeeSearchBean.HAS_EDIT_EMP_INFO_PERMISSION)}" />
					<p:watermark for="location" value="Enter Location" />  
				</h:panelGroup>
				
				<h:panelGroup>
					<h:outputText value="Employee Code" />
					<br />
					<p:inputText id="employeeCode" value="#{employeeSearchBean.employeeCode}"/>
					<p:watermark for="employeeCode" value="Enter Employee Code" />  
				</h:panelGroup>
				
				<h:panelGroup>
					<h:outputLabel value="#{msg['employeename.label']}" />
					<br />
					<p:inputText id="employeeName" value="#{employeeSearchBean.employeeName}"/>
					<p:watermark for="employeeName" value="Enter Employee Name" />   
				</h:panelGroup>
				
				<h:panelGroup>
					<br />
					<p:commandButton value="Search" action="#{employeeSearchBean.searchEmployees}" update="@form"/>   
				</h:panelGroup>				
			</h:panelGrid> 
			
			<h:panelGrid rendered="#{not employeeSearchBean.EMPLOYEE_FOUND}" style="margin-top: 10px;">
				<h:outputLabel value="No employees found for your search." styleClass="outputLabelwamInformation" style="font-weight: normal;"/>
			</h:panelGrid>			
			<!-- Search Result DataList -->
			<p:dataList id="employeeList" value="#{employeeSearchBean.employees}" var="employee" style="margin: 20px;" 
				paginator="true" rows="10" effectSpeed="fast" rendered="#{employeeSearchBean.renderEmployeeList}"
        		paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"   
        		rowsPrPageTemplate="10, 20, 30" type="unordered" itemType="none"> 
        			<p:column rendered="#{employeeSearchBean.HAS_EDIT_EMP_INFO_PERMISSION}">
	        			<p:commandLink action="#{employeeSearchBean.viewEmployeeInEditMode}" oncomplete="employeeEditDialog.show()" update="@form" style="text-decoration: none; font-family: Arial,sans-serif; color: #777777;	font-size: 12px;">
	        			<f:setPropertyActionListener  target="#{employeeSearchBean.selectedEmployee}" value="#{employee}" />
	        			<h:panelGrid styleClass="employeeSearchColumnGrid" columns="1"  style="width: 100%; margin-bottom: 1px; border-bottom: 1px solid #d9d9d9;" title="Click to View/Update">
		        			<h:panelGrid columns="2" style="width: 100%;" columnClasses="gridCellTopLeftAligned, gridCellTopRightAligned">
			        			<h:outputLabel value="#{employee.firstName} #{employee.lastName}" styleClass="outputTextSectionHeader" style="font-size: 16px; " />
				     			<h:panelGroup>    
				     			 	<p:commandButton icon="ui-icon-search" >    				           			
					           		</p:commandButton> 
					           		<p:commandButton rendered="false" icon="ui-icon-close" actionListener="#{employeeSearchBean.deleteClickActionListener}">
					           			<f:param name="employeeId" value="#{employee.employeeId}" /> 
					           		</p:commandButton>
				           		</h:panelGroup>
			           		</h:panelGrid>
			           		
				        	<h:panelGrid columns="2" style="width: 100%; " columnClasses="employeePhotoGridCell, employeeSearchGridCell" >
					        	<p:graphicImage style="border: none; width: 100px;  -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;" value="/EmployeeImages/#{employee.photo}" />
					           	<h:panelGrid columns="4" style="width: 100%; " columnClasses="employeeDetailGridCellLabel, employeeDetailGridCellText, employeeDetailGridCellLabel, employeeDetailGridCellText">
					           		<h:outputLabel value="#{msg['employeeid.label']}" />
					           		<h:outputLabel value="#{employee.employeeCode}" />		           		
					           		<h:outputLabel value="Employee Name" />
					           		<h:outputLabel value="#{employee.firstName} #{employee.lastName}" />
					           		<h:outputLabel value="Module" />
					           		<h:outputLabel value="#{employee.moduleName}" />		           		
					           		<h:outputLabel value="Position" />
					           		<h:outputLabel value="#{employee.designation}" />
					           		<h:outputLabel value="Email" />
					           		<h:outputLabel value="#{employee.email}" />
					           		<h:outputLabel value="Contact Number" />
					           		<h:outputLabel value="#{employee.telephone}" />
					           		<h:outputLabel value="Date of Birth" />
					           		<h:outputLabel value="#{employee.dateOfBirth}">
					           		 <f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{employeeSearchBean.timeZone}"/>
					           		</h:outputLabel>
					           		<h:outputLabel value="Location" />
					           		<h:outputLabel value="#{employee.location}" />
					           	</h:panelGrid>
				           </h:panelGrid>  
				       </h:panelGrid>
				       </p:commandLink>
			       </p:column>  
			       
			       <p:column rendered="#{not employeeSearchBean.HAS_EDIT_EMP_INFO_PERMISSION}">
	        			
	        			
	        			<h:panelGrid styleClass="employeeSearchColumnGrid" columns="1"  style="width: 100%; margin-bottom: 1px; border-bottom: 1px solid #d9d9d9;">
		        			<h:panelGrid columns="2" style="width: 100%;" columnClasses="gridCellTopLeftAligned, gridCellTopRightAligned">
			        			<h:outputLabel value="#{employee.firstName} #{employee.lastName}" styleClass="outputTextSectionHeader" style="font-size: 16px; " />
				     			<h:panelGroup>    
				     			 	
					           		<p:commandButton rendered="false" icon="ui-icon-close" actionListener="#{employeeSearchBean.deleteClickActionListener}">
					           			<f:param name="employeeId" value="#{employee.employeeId}" /> 
					           		</p:commandButton>
				           		</h:panelGroup>
			           		</h:panelGrid>
			           		
				        	<h:panelGrid columns="2" style="width: 100%; " columnClasses="employeePhotoGridCell, employeeSearchGridCell" >
					        	<p:graphicImage style="border: none; width: 100px;  -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;" value="/EmployeeImages/#{employee.photo}" />
					           	<h:panelGrid columns="4" style="width: 100%; " columnClasses="employeeDetailGridCellLabel, employeeDetailGridCellText, employeeDetailGridCellLabel, employeeDetailGridCellText">
					           		<h:outputLabel value="#{msg['employeeid.label']}" />
					           		<h:outputLabel value="#{employee.employeeCode}" />		           		
					           		<h:outputLabel value="Employee Name" />
					           		<h:outputLabel value="#{employee.firstName} #{employee.lastName}" />
					           		<h:outputLabel value="Module" />
					           		<h:outputLabel value="#{employee.moduleName}" />		           		
					           		<h:outputLabel value="Position" />
					           		<h:outputLabel value="#{employee.designation}" />
					           		<h:outputLabel value="Email" />
					           		<h:outputLabel value="#{employee.email}" />
					           		<h:outputLabel value="Contact Number" />
					           		<h:outputLabel value="#{employee.telephone}" />
					           		<h:outputLabel value="Date of Birth" />
					           		<h:outputLabel value="#{employee.dateOfBirth}">
					           		 <f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{employeeSearchBean.timeZone}"/>
					           		</h:outputLabel>
					           		<h:outputLabel value="Location" />
					           		<h:outputLabel value="#{employee.location}" />
					           	</h:panelGrid>
				           </h:panelGrid>  
				       </h:panelGrid>
				       
			       </p:column>  
			       
			       
			</p:dataList> 
			
			<!-- Edit Dialog -->
			<p:dialog hideEffect="fade" showEffect="fade" header="Personal Information of #{employeeSearchBean.selectedEmployee.firstName}" id="employeeEditDialog" widgetVar="employeeEditDialog"  resizable="false" modal="true">
			    <h:panelGrid columns="6" style="" cellspacing="5">  
		            <h:inputHidden />
		            <h:outputLabel value="#{msg['employeeid.label']}:" />
		            <h:outputText  value="#{employeeSearchBean.selectedEmployee.employeeCode}" />
		            
		            <h:inputHidden />
		            <h:inputHidden />
		            <h:inputHidden />
		            
		            <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['firstname.label']}:" />
		            <p:inputText value="#{employeeSearchBean.selectedEmployee.firstName}" />
		            
		            <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['lastname.label']}:" />
		            <p:inputText value="#{employeeSearchBean.selectedEmployee.lastName}" />
		            
		             <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['email.label']}:" />
		            <p:inputText value="#{employeeSearchBean.selectedEmployee.email}" />
		            
		            <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['contactnumber.label']}:" />
		            <p:inputText value="#{employeeSearchBean.selectedEmployee.telephone}" />
		            
		            <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['location.label']}:" />
		            <p:inputText value="#{employeeSearchBean.selectedEmployee.location}" />
		            
		            <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['dateofbirth.label']}:" />
		            <p:calendar value="#{employeeSearchBean.selectedEmployee.dateOfBirth}" timeZone="#{employeeSearchBean.timeZone}" pattern="dd-MMM-yyyy" navigator="true" yearRange="1900:2030">
		            	
		            </p:calendar>
		            
		            
		            <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['module.lable']}:" />
		            <h:panelGrid>
		            <h:panelGroup>
		            <h:panelGroup>
			            <p:selectOneMenu id="dialogModulesMenu" value="#{employeeSearchBean.selectedEmployee.moduleName}" style="width: 159px; ">
			            	<f:selectItem itemLabel="" itemValue=""/>
			            	<p:ajax event="change" listener="#{employeeSearchBean.otherModuleListner}" process="@this" update="otherModule"></p:ajax>
			            	<f:selectItems value="#{employeeSearchBean.modulesMap}"></f:selectItems>		            	
			            </p:selectOneMenu><br/>
			            <p:watermark for="dialogModulesMenu" value="Select Module" />
		            </h:panelGroup>
		            <h:panelGroup id="otherModule">
						 <p:inputText value="#{employeeSearchBean.otherModule}" rendered="#{employeeSearchBean.RENDER_OTHER_MODULE}" ></p:inputText>
						 <p:watermark value="Enter new module here" for="otherModule"></p:watermark>
					</h:panelGroup>
					</h:panelGroup>
		            </h:panelGrid>
		            <h:outputLabel value="*" />  
		            <h:outputLabel value="#{msg['designation.label']}:" />
		            <h:panelGrid>
					<h:panelGroup>
		            <h:panelGroup>
			            <p:selectOneMenu id="designationsMenu" value="#{employeeSearchBean.selectedEmployee.designation}" style="width: 159px;">
			            	<f:selectItem itemLabel="" itemValue=""/>
			            	<p:ajax event="change" listener="#{employeeSearchBean.otherDesignationListner}" process="@this" update="otherDesignation"></p:ajax>
			            	<f:selectItems value="#{employeeSearchBean.designationsMap}"></f:selectItems>		            	
			            </p:selectOneMenu><br/>
		            	<p:watermark for="designationsMenu" value="Select Designation" />
		            </h:panelGroup>
		                
						<h:panelGroup id="otherDesignation">
						 <p:inputText value="#{employeeSearchBean.otherDesignation}" rendered="#{employeeSearchBean.RENDER_OTHER_DESIGNATION}" ></p:inputText>
						 <p:watermark value="Enter new designation here" for="otherDesignation"></p:watermark>
						</h:panelGroup>
		            </h:panelGroup>
		            </h:panelGrid>
		            <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['role.label']}:" />
		            <h:panelGroup>
			            <p:selectOneMenu id="rolesMenu" value="#{employeeSearchBean.selectedRoleId}" style="width: 159px;">
			            	<f:selectItem itemLabel="" itemValue=""/>
			            	<f:selectItems value="#{employeeSearchBean.rolesMap}" />            	
			            </p:selectOneMenu>
			            <p:watermark for="rolesMenu" value="Select Role" />
			        </h:panelGroup>
			        
		            <h:inputHidden />
		            <h:inputHidden />
		            <h:inputHidden />
		            
		           <h:inputHidden />
		            <h:outputLabel value="#{msg['primaryskills.label']}:" />
		            <p:inputText value="#{employeeSearchBean.selectedEmployee.primarySkill}" />
		            
		            <h:inputHidden />
		            <h:outputLabel value="#{msg['secondaryskills.label']}:" />
		            <p:inputText value="#{employeeSearchBean.selectedEmployee.secondarySkill}" />
		            
		            <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['competenceylead.label']}:" />
		              <h:panelGroup>
			            <p:selectOneMenu id="competencyLeadsMenu" value="#{employeeSearchBean.selectedCompetencyLeadId}" style="width: 159px;">
			            	<f:selectItem itemLabel="" itemValue=""/>
			            	<f:selectItems value="#{employeeSearchBean.competencyLeadsMap}" />            	
			            </p:selectOneMenu>
			            <p:watermark for="competencyLeadsMenu" value="Select ComptencyLead" />
			        </h:panelGroup>
			        <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['centerhead.label']}:" />
		              <h:panelGroup>
			            <p:selectOneMenu id="centerHeadsMenu" value="#{employeeSearchBean.selectedCenterHeadId}" style="width: 159px;">
			            	<f:selectItem itemLabel="" itemValue=""/>
			            	<f:selectItems value="#{employeeSearchBean.centerHeadsMap}" />            	
			            </p:selectOneMenu>
			            <p:watermark for="centerHeadsMenu" value="Select CenterHead" />
			        </h:panelGroup>
			        
			         <h:outputLabel value="*" />
		            <h:outputLabel value="#{msg['projectmanager.label']}:" />
		             <h:panelGroup>
			            <p:selectOneMenu id="projectManagersMenu" value="#{employeeSearchBean.selectedProjectManagerId}" style="width: 159px;">
			            	<f:selectItem itemLabel="" itemValue=""/>
			            	<f:selectItems value="#{employeeSearchBean.projectManagersMap}" />            	
			            </p:selectOneMenu>
			            <p:watermark for="projectManagersMenu" value="Select Project Manager" />
			        </h:panelGroup>
			        
			        
			        <h:inputHidden />
		            <h:outputLabel value="#{msg['projectname.lable']}:" />
		            <p:inputText value="#{employeeSearchBean.assignedProject}" />
			        
			      
		            
		          	<h:inputHidden />
		            <h:outputLabel value="#{msg['projectstratdate.label']}:" />
		            <p:calendar value="#{employeeSearchBean.projectStartDate}" pattern="dd-MMM-yyyy"/>
		            
		            <h:inputHidden />
		            <h:outputLabel value="#{msg['projectenddate.label']}:" />
		            <p:calendar value="#{employeeSearchBean.projectEndDate}" pattern="dd-MMM-yyyy"/>
		            <h:inputHidden />
		            <h:outputLabel value="#{msg['projectstatus.label']}:" />
		             <h:panelGroup>
			            <p:selectOneMenu id="projectStatusMenu" value="#{employeeSearchBean.selectedProjectStatus}" style="width: 159px;">
			            	<f:selectItem itemLabel="" itemValue=""/>
			            	<f:selectItems value="#{employeeSearchBean.projectStatusMap}" />            	
			            </p:selectOneMenu>
			            <p:watermark for="projectStatusMenu" value="Select Project Status" />
			        </h:panelGroup>
		                      
		        </h:panelGrid>  
		        
		        <h:panelGrid style="padding-top: 5px; width: 100%; border-top: 1px solid #d9d9d9" columnClasses="gridCellMiddleRightAligned">
		        	<h:panelGroup>
		        	<p:commandButton id="relieveButton" value="Relieve" actionListener="#{employeeSearchBean.relieveEmployee}" update="growl" rendered="#{employeeSearchBean.HAS_RELIEVE_EMPLOYEE_PERMISSION}" >
		        	</p:commandButton>
		        	<p:commandButton id="updateButton" value="Update" actionListener="#{employeeSearchBean.updateEmployee}" update="growl" rendered="#{employeeSearchBean.HAS_EDIT_EMP_INFO_PERMISSION}" >
		        	</p:commandButton>
		        	<p:commandButton id="closeButton" value="Close" actionListener="#{employeeSearchBean.dialogClose}" />
		        	</h:panelGroup>
		        </h:panelGrid>  
		        </p:dialog>  
			<p:growl id="growl"/>
		</h:form>
	</ui:define>
</ui:composition>

